<!--  -->
<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="clickModalFn" :close-on-press-escape="false" @closed="closed">

      <div class="dialog__body">
        <el-scrollbar>
          <div class="dialog__body__item" :style="{ maxHeight: maxHeight + 'px' }">
            <slot />
          </div>
        </el-scrollbar>
      </div>

      <template #footer v-if="footer">
        <el-button @click="dialogVisible = false" v-if="cancelText" :disabled="loading">{{cancelText}}</el-button>
        <el-button type="primary" @click="submit" :loading="loading">{{loading?'请求中':sureText}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { computed, ref, toRefs, watch, onBeforeMount, onBeforeUnmount } from '@vue/composition-api'

function dialog({ value, clickModal, sureFn }, emit) {
  const dialogVisible = ref(value.value)
  const loading = ref(false)

  watch(value, () => {
    if (dialogVisible.value === value.value) return
    dialogVisible.value = value.value
  })

  // 判断是否可点击遮罩层关闭
  const clickModalFn = computed(() => {
    if (!clickModal.value) return false
    return !loading.value
  })

  // 关闭后向上通知
  function closed() {
    loading.value = false
    emit('input', false)
  }

  // 确定回调
  function submit() {
    loading.value = true
    sureFn.value(cb)
  }
  // 关闭回调，消息提示
  function cb(message, type = "info") {
    dialogVisible.value = false

    if (!message) return
    Message({
      message: message,
      type: type
    });
  }

  return {
    dialogVisible,
    loading,
    clickModalFn,
    closed,
    submit
  }
}

// 窗体高度计算
function dialogHeight() {

  const maxHeight = ref(0)  // 内容弹框body体高度

  onBeforeMount(() => {
    window.addEventListener('resize', changeDialogBodyHeight)
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', changeDialogBodyHeight)
  })

  function changeDialogBodyHeight() {
    const height = document.documentElement.clientHeight
    const headerFooterHeight = 54 + 70 + 40 // 弹框头部+底部+内边距
    const padding = 100 // 弹框上下间距
    const fixed = headerFooterHeight + padding

    maxHeight.value = height - fixed
  }

  changeDialogBodyHeight()

  return {
    maxHeight
  }
}
export default {
  name: 'ContentDialog',
  props: {
    // 头部信息
    title: {
      type: String,
      default: '提示',
    },
    // 是否展示fotter
    footer: {
      type: Boolean,
      default: true
    },
    // 展示的双向数据绑定
    value: {
      type: Boolean,
      default: false,
    },
    // 点击遮罩层关闭
    clickModal: {
      type: Boolean,
      default: true,
    },
    sureText: {
      type: String,
      default: '确 定'
    },
    cancelText: {
      type: String,
      default: '取 消'
    },
    // 点击确认
    sureFn: {
      type: Function
    },
  },
  setup(props, { emit }) {
    return {
      ...dialog(toRefs(props), emit),
      ...dialogHeight()
    }
  },
}

</script>

<style lang='scss' scoped>
.dialog {
  ::v-deep .el-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto !important;
    height: fit-content;
    width: fit-content !important;
    .el-dialog__body {
      padding: 0;
    }
  }

  &__body {
    padding: 20px 0 20px 30px;
    &__item {
      padding-right: 30px;
    }
  }
}
</style>